<template>
  <div>
    <nav-bar>
      <template #default> 网上商城 </template>
    </nav-bar>
    <banner-bar :banner-data="banners"></banner-bar>
    <recommend-view :recommendList="recomendList"></recommend-view>
    <tab-control :titles="titles" @tabClick="tabClick"></tab-control>
    <goods-list :goodsList="showGoods"></goods-list>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import NavBar from "@/components/common/NavBar.vue";
import BannerBar from "@/components/common/BannerBar.vue";
import RecommendView from "@/components/common/RecommendView.vue";
import TabControl from "@/components/common/TabControl.vue";
import GoodsList from "@/components/common/GoodsList.vue";

export default {
  components: {
    NavBar,
    BannerBar,
    RecommendView,
    TabControl,
    GoodsList,
  },
  setup() {
    const state = reactive({
      banners: [],
      recomendList: [],
      productList: {},
      titles: [
        { tname: "first", title: "居家" },
        { tname: "second", title: "美食" },
        { tname: "third", title: "服饰" },
        { tname: "fourth", title: "母婴" },
      ],
    });
    onMounted(() => {
      fetch("/banners.json")
        .then((res) => res.json())
        .then((res) => {
          state.banners = res.banners;
        });

      fetch("/recommend.json")
        .then((res) => res.json())
        .then((res) => {
          state.recomendList = res.recomendList;
        });
      fetch("/products.json")
        .then((res) => res.json())
        .then((res) => {
          state.productList = res;
        });
    });
    const currentType = ref("居家");
    const tabClick = (tab, event) => {
      const tabIndex = tab.index;
      // const tabName = tab.name;
      // const tabLabel = tab.label;
      const tabTitle = state.titles[tabIndex].title;
      currentType.value = tabTitle;
      console.log(tabIndex, tabTitle, state.productList[tabTitle]);
    };

    // 计算属性
    const showGoods = computed(() => {
      return state.productList[currentType.value];
    });

    return {
      ...toRefs(state),

      tabClick,
      showGoods,
    };
  },
};
</script>

<style  scoped>
</style>
